<template>
  <div class="box2">
    <div class="box2-A">
      <section>
        <icon name="home" style="background-color: aqua" />
        <span style="font-size: 3px">任务通过率</span>
      </section>
      <dv-decoration-3 style="width: 90px; height: 20px" />
    </div>
    <div id="main" style="width: 170px; height: 180px"></div>
    <div class="mainZZ">
        <span>
            <p style="color: gold; font-size: 10px;">￥<span style="color: cyan;">20000.0</span></p>
            <p style="font-size: 5px;"> 总共完成数量<span style="color: green;">(件)</span></p>
        </span>
        <span>
            <p style="color: gold; font-size: 10px;">￥<span style="color: cyan;">20000.0</span></p>
            <p style="font-size: 5px;"> 今日构建总量<span style="color: green;">(件)</span></p>
        </span>
        <span>
            <p style="color: gold; font-size: 10px;">￥<span style="color: cyan;">20000.0</span></p>
            <p style="font-size: 5px;"> 未通过数量<span style="color: green;">(件)</span></p>
        </span>
        <span>
            <p style="color: gold; font-size: 10px;">￥<span style="color: cyan;">20000.0</span></p>
            <p style="font-size: 5px;"> 正在编译数量<span style="color: green;">(件)</span></p>
        </span>
    </div>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      
    };
  },
  mounted() {
    var myChart = this.$echarts.init(document.getElementById("main"));

    // 指定图表的配置项和数据
    var option = {
      legend: {
        top: "bottom",
        itemWidth: 5,
        itemHeight: 4,
        textStyle: {
          color: "rgba(255, 255, 255, 1)",
          fontSize: 10,
        },
      },
      series: [
        {
          name: "Nightingale Chart",
          type: "pie",
          radius: [3, 30],
          center: ["50%", "35%"],
          roseType: "area",
          itemStyle: {
            borderRadius: 8,
          },
          data: [
            { value: 40, name: "rose 1" },
            { value: 38, name: "rose 2" },
            { value: 32, name: "rose 3" },
            { value: 30, name: "rose 4" },
            { value: 28, name: "rose 5" },
            { value: 26, name: "rose 6" },
          ],
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  },
};
</script>
  <style lang="scss" scoped>
.box2-A {
  display: flex;
  align-items: center;
}
.mainZZ{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
</style>